<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-09 10:07:06
 * @LastEditTime: 2019-10-19 17:37:25
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="login">
    <div class="logo" v-if="logo">
      <img src="../assets/logo.png">
      <p>美丽报表</p>
    </div>
    <div style="height:0.64rem;" v-else></div>
    <div class="from">
      <input
        class="input"
        type="text"
        v-model="phone"
        placeholder="请输入手机号"
        pattern="^(?:(?:\+|00)86)?1\d{10}$"
        @blur="blu_1"
        @focus="focu_1"
        @keyup="keyu"
        required
        v-if="login_a"
      >
      <div
        class="rega animated bounceInRight"
        v-if="registered"
        style="color:green;font-size:0.08rem;"
      >放心登录</div>
      <div
        class="rega animated bounceInRight"
        v-if="plregistered"
        style="color:#e6a23c;font-size:0.08rem;"
      >请填写正确的手机号格式</div>
      <div
        class="rega animated bounceInRight"
        v-if="unregistered"
        style="color:red;font-size:0.08rem;"
      >该账号未注册</div>
      <input
        class="input"
        :type="typea"
        v-model="password"
        placeholder="请输入密码"
        @blur="blu"
        @focus="focu"
        @keyup="keyu"
        required
        v-if="login_a"
      >
      <img src="../assets/eye.png" class="eye" v-if="eye_1" @click="eye_a">
      <img src="../assets/eye_k.png" class="eye" v-if="eye" @click="eye_b">
      <div class="login_a" v-if="checked_no" style="background:#A9A9A9;">登录</div>
      <!-- <div class="login_a" @click="checking" v-if="checked">点击验证</div> -->
      <div class="login_a" @mousedown="checking" v-if="checked">登录</div>
      <div class="batton" v-if="login_a">
        <p @click="register">用户注册</p>
        <p @click="forget">忘记密码</p>
      </div>
    </div>

    <!-- <slide-verify
      :l="42"
      :r="10"
      :w="310"
      :h="155"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
      :slider-text="text"
      v-show="checked_a"
      style="margin:0 auto;"
    ></slide-verify> -->
  </div>
</template>

<script>
let Base64 = require('js-base64').Base64;
import { pwd_login,register_judge } from "../api/api.js";
export default {
  name: "login",
  data() {
    return {
      checked_a: false,
      checked_no: true,
      checked: false,
      text: "向右滑",
      phone: "",
      password: "",
      login_a: true,
      logo: true,
      eye: false,
      eye_1: true,
      typea: "password",
      registered: false,
      unregistered: false,
      plregistered: false,
    };
  },
  mounted() {
    
  },
  created(){
    if (localStorage.getItem("mlbb_phone") != ''&&localStorage.getItem("mlbb_phone") != undefined) {
      this.phone = JSON.parse(localStorage.getItem("mlbb_phone"));
    }
    if(localStorage.getItem("mlbb_password") != ''&&localStorage.getItem("mlbb_password") != undefined){
      this.password=Base64.decode(JSON.parse(localStorage.getItem("mlbb_password")));
    }
    if(this.phone!=''&&this.password!=''&&this.phone!=null&&this.password!=null){
      this.pwd_login_a();
    }else{
      this.phone=''
      this.password=''
    }
  },
  watch: {},
  methods: {
    onSuccess() {
      //   成功
      this.checked_a = false;
      this.login_a = true;
      this.pwd_login_a();
    },
    onFail() {
      //   失败
    },
    onRefresh() {
      console.log(1111);
    },

    // 点击进行图片验证
    checking() {
      if (this.password.length >= 6 && /^1[3456789]\d{9}$/.test(this.phone)) {
        // this.login_a = false;
        // this.checked = false;
        // this.checked_a = true;
        this.pwd_login_a();
      } else {
        this.$toast("请输入完整信息");
      }
    },
    // 注册
    register() {
      this.$router.push("/register");
    },
    // 忘记密码
    forget() {
      this.$router.push("/forget");
    },
    // 显示与隐藏
    keyu() {
      if (this.password.length >= 6 && /^1[3456789]\d{9}$/.test(this.phone)) {
        this.checked = true;
        this.checked_no = false;
      } else {
        this.checked_no = true;
        this.checked = false;
      }
    },
    // 失聚焦
    blu() {
      this.logo = true;
    },
    blu_1() {
      this.logo = true;
      if (/^1[3456789]\d{9}$/.test(this.phone)) {
        register_judge({
          data: {
            mobile: this.phone
          }
        }).then(res => {
          if (res.data.code == 10055) {
            this.unregistered = true;
            this.registered = false;
            this.plregistered = false;
          } else if (res.data.code == 10056) {
            this.unregistered = false;
            this.registered = true;
            this.plregistered = false;
          }
        });
      } else if (this.phone != "") {
        this.plregistered = true;
      }
    },
    focu() {
      this.logo = false;
    },
    focu_1() {
      this.logo = false;
      this.plregistered = false;
      this.registered = false;
      this.unregistered = false;
    },
    // 小眼睛
    eye_a() {
      this.eye = true;
      this.eye_1 = false;
      this.typea = "text";
    },
    eye_b() {
      this.eye = false;
      this.eye_1 = true;
      this.typea = "password";
    },
    // 密码登录接口
    pwd_login_a() {
      this.$loading.open();
      pwd_login({
        data: {
          mobile: this.phone,
          pwd: this.password
        }
      }).then(res => {
        this.$loading.close();
        if (res.data.code == 10010) {
          this.$toast("登录成功");
          console.log(JSON.parse(res.data.body.data))
          this.$router.push("/home");
          sessionStorage.setItem("mobile", JSON.stringify(this.phone));
          localStorage.setItem("mlbb_phone", JSON.stringify(this.phone));
          localStorage.setItem("mlbb_password", JSON.stringify(Base64.encode(this.password)));
          sessionStorage.setItem("data_mobal", JSON.stringify(res.data.body.data));
        } else if (res.data.code == 10011) {
          this.$toast("登录失败");
          this.password=''
          this.checked_no=true
          this.checked=false
        } else if (res.data.code == 10008) {
          this.$toast("您未注册");
          this.password=''
          this.checked_no=true
          this.checked=false
        } else if (res.data.code == 10012) {
          this.$toast("密码错误或密码与用户名不匹配");
          this.password=''
          this.checked_no=true
          this.checked=false
        }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.login {
  height: 100vh;
  background-image: url("../assets/background_1.png");
  .logo {
    padding-top: 0.92rem;
    text-align: center;
    img {
      height: 0.65rem;
      width: 0.65rem;
    }
    p {
      font-size: 0.18rem;
      font-family: PingFangSC;
      font-weight: 600;
      line-height: 0.25rem;
      color: #888;
    }
  }
  .from {
    width: 3.46rem;
    padding-top: 0.02rem;
    margin: 0 auto;
    position: relative;
    .input {
      outline: none;
      border: none;
      border-radius: 2px;
      width: 3.36rem;
      height: 0.51rem;
      transition: all 300ms;
      background-color: transparent;
      border-bottom: 0.01rem solid #fdfdfd;
      padding-left: 0.1rem;
      &:focus {
        border-bottom: 0.01rem solid #ccc;
      }
    }
    .eye {
      height: 0.08rem;
      width: 0.13rem;
      position: absolute;
      right: 0.1rem;
      bottom: 1.34rem;
    }
    .input::-webkit-input-placeholder {
      color: #ababab;
      font-size: 0.14rem;
    }
    .login_a {
      height: 0.47rem;
      width: 100%;
      background: -webkit-linear-gradient(left, #E82716, #FC6565);
      background: -o-linear-gradient(right, #E82716, #FC6565);
      background: -moz-linear-gradient(right, #E82716, #FC6565);
      background: linear-gradient(to right, #E82716, #FC6565);
      border-radius: 0.04rem;
      font-size: 0.16rem;
      color: #fff;
      line-height: 0.47rem;
      text-align: center;
      margin-top: 0.29rem;
    }
    .batton {
      display: flex;
      justify-content: space-between;
      color: #333;
      font-size: 0.14rem;
      text-decoration: none;
      margin-top: 0.24rem;
    }
    .rega {
      position: absolute;
      right: 0.2rem;
      top: 0.2rem;
    }
  }
}
</style>
